<ui:composition template="template/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

	<ui:define name="titel">
				Bilderübersicht
		</ui:define>
	<ui:define name="content">
		<script type="text/javascript">
			$(document).ready(function() {
				var margin = 10;
				$(".album-overlay").css("opacity", "0.9");
				$(".album-overlay").hover(function() {
					$(this).stop();
					$(this).animate({
						opacity : 0
					}, 400);
				}, function() {
					$(this).stop();
					$(this).animate({
						opacity : 0.9
					}, 200);
				});

				$('.album-image').each(function() {
					degree = (Math.random() * margin * 2) - margin;
					$(this).css({
						'-webkit-transform' : 'rotate(' + degree + 'deg)',
						'-moz-transform' : 'rotate(' + degree + 'deg)',
						'-ms-transform' : 'rotate(' + degree + 'deg)',
						'-o-transform' : 'rotate(' + degree + 'deg)',
						'transform' : 'rotate(' + degree + 'deg)',
						'left' : (Math.random() * margin * 2) - margin,
						'top' : (Math.random() * margin * 2) - margin
					});
				});
			});
		</script>
		<h:form id="mainForm">
			#{galerieController.update()}
			<p:dataGrid value="#{galerieBean.alben}" var="album" columns="3">
				<h:outputLink id="albumLink"
					value="alben/#{album.linkName}-#{album.id}">
					<div id="album" class="album">
						<ui:repeat value="#{album.vorschauBilder}" var="bild">
							<p:graphicImage value="image/thumb/#{bild.id}/#{bild.fullName}"
								alt="#{bild.name}" styleClass="album-image imagelink" />
						</ui:repeat>
						<div id="album-overlay" class="album-overlay" align="center">
							<h:outputText
								styleClass="album-name"
								value="#{album.name}" />
						</div>
					</div>
				</h:outputLink>
			</p:dataGrid>
		</h:form>
	</ui:define>
</ui:composition>